<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="明月">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        main {
            width: 210px;
            margin: 0 auto;
            background-color: #eee;
        }

        div {
            display: flex;
            justify-content: space-between;
        }

        section {
            width: 154px;
            height: 154px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li>img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            cursor: pointer;
        }

        main .bottom {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <main>
        <div>
            <section>
                <img src="img/big_1.jpg" alt="">
            </section>
            <ul class="right">
                <li><img src="img/small_1.jpg" alt="" data-src="img/big_1.jpg"></li>
                <li><img src="img/small_2.jpg" alt="" data-src="img/big_2.jpg"></li>
                <li><img src="img/small_3.jpg" alt="" data-src="img/big_3.jpg"></li>
            </ul>
        </div>
        <ul class="bottom">
            <li><img src="img/small_4.jpg" alt="" data-src="img/big_4.jpg"></li>
            <li><img src="img/small_5.jpg" alt="" data-src="img/big_5.jpg"></li>
            <li><img src="img/small_6.jpg" alt="" data-src="img/big_6.jpg"></li>
            <li><img src="img/small_7.jpg" alt="" data-src="img/big_7.jpg"></li>
            <li><img src="img/small_8.jpg" alt="" data-src="img/big_8.jpg"></li>
            <li><img src="img/small_9.jpg" alt="" data-src="img/big_9.jpg"></li>
            <li><img src="img/small_10.jpg" alt="" data-src="img/big_10.jpg"></li>
            <li><img src="img/small_11.jpg" alt="" data-src="img/big_11.jpg"></li>
        </ul>
    </main>
</body>

</html>
<script>
    var imgs = document.querySelector('section img');
    var lis = document.querySelectorAll('li img');
    for (var i = 0; i < lis.length; i++) {

        lis[i].onmouseenter = function () { 
            // console.log(lis);
            imgs.src=this.dataset.src;
        }
    }



    // var imgs = document.querySelector('section img');
    // var lis = document.querySelectorAll('li img');
    // var msg = ["img/big_1.jpg", "img/big_2.jpg", "img/big_3.jpg", "img/big_4.jpg", "img/big_5.jpg",
    //     "img/big_6.jpg", "img/big_7.jpg", "img/big_8.jpg", "img/big_9.jpg", "img/big_10.jpg",
    //     "img/big_11.jpg"];
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].index = i;
    //     lis[i].onmouseenter = function () {
    //         // console.log(lis);
    //         imgs.src = msg[this.index];
    //     }
    // }

</script>